import Doc from '~/components/layout/docs'
import { Image } from '~/components/media'
import Caption from '~/components/text/caption'
import Collapse, { CollapseGroup } from '~/components/collapse'
import GitHubDefaultBehaviour from '~/components/git-mdx/github/default-behaviour.mdx'
import GitHubEnvironmentVariables from '~/components/git-mdx/github/environment-variables.mdx'
import GitHubPermissions from '~/components/git-mdx/github/permissions.mdx'
import GitHubWorkflowExtension from '~/components/git-mdx/github/extended-workflow.mdx'

export const meta = {
  title: 'ZEIT Now for GitHub',
  description:
    'Deploy each change in your GitHub repositories with ZEIT Now to share and test with your colleagues. Instant share-able links to your work with each push. Automatically make your changes available from production domains.',
  editUrl: 'pages/docs/v2/git-integrations/zeit-now-for-github.mdx',
  lastEdited: '2020-01-24T23:33:43.000Z'
}

The ZEIT Now for GitHub integration automatically deploys your GitHub projects with [ZEIT Now](/), providing [Preview Deployment URLs](/docs/v2/platform/deployments#preview), and automatic [Custom Domain](/docs/v2/custom-domains) updates.

<Image
  src={`${process.env.ASSETS}/docs/git-integrations/github-comment.png`}
  width={1538 / 2.5}
  height={660 / 2.5}
  shadow
  borderRadius
/>
<Caption>ZEIT Now for GitHub deploying a pull request automatically.</Caption>

### Connecting with GitHub

Link your GitHub and ZEIT accounts from your dashboard by clicking the ["New Project"](/new) button followed by the "Install Now for GitHub" button from the "GitHub" tab under the "From your existing code" section.

Once you have authorized the GitHub integration, you will redirect back to the New Project page where you can create a new project from an existing repository by clicking the "New Project from GitHub" button under the "GitHub" tab or by selecting a template and creating a GitHub repository from it.

<Image
  src={`${process.env.ASSETS}/docs/git-integrations/from-your-existing-code.png`}
  width={1184 / 2}
  height={671 / 2}
  shadow
  borderRadius
/>
<Caption>ZEIT Now for GitHub installed and ready to set up a project.</Caption>

For more information on deploying projects, read [the ZEIT Now introduction documentation](/docs).

### More Information About ZEIT Now for GitHub

For more information, such as a reference for default environment variables, expand the relevant details view below.

<CollapseGroup>
  <Collapse title="Default Behaviour">
    <GitHubDefaultBehaviour />
  </Collapse>

<Collapse title="Extending Your GitHub Workflow">
  <GitHubWorkflowExtension />
</Collapse>

<Collapse title="Included Environment Variables">
  <GitHubEnvironmentVariables />
</Collapse>

<Collapse title="Required Permissions">
    <GitHubPermissions />
  </Collapse>
</CollapseGroup>

export default ({ children }) => <Doc meta={meta}>{children}</Doc>

export const config = {
  amp: 'hybrid'
}
